<template>
  <div class="search">
    <div class="banxin">
      <div class="search_tou">
        <div class="search_tou_a">
          <span>实习</span><span>校招</span><span>公司</span>
        </div>
        <div class="search_tou_b">
          <div class="search_tou_b_a">北京 <span></span></div>
          <div class="search_tou_b_b">
            <input
              @keyup.enter="getDate2"
              type="text"
              v-model="kw2"
              placeholder="请输入期望的实习岗位，公司"
            />
          </div>
          <div @click="getDate2" class="search_tou_b_c">搜索</div>
        </div>
      </div>
      <div class="search_body">
        <div class="search_body_a">
          <span>实习区域：</span><span>不限</span> <span>实习月份：</span
          ><span>{{ this.xxyf[xxyfcount] }}</span> <span>每周几天：</span
          ><span>{{ this.mzjt[mzjtcount] }}</span> <span>学历要求：</span
          ><span>{{ this.xlyq[xlyqcount] }}</span> <span>转正机会：</span
          ><span>{{ this.zzjh[zzjhcount] }}</span> <span>企业筛选：</span
          ><span>{{ this.qysx[qysxcount] }}</span>
          <span class="search_body_a_a" @click="clear">清空</span>
        </div>
        <div v-if="bian"></div>
        <div v-else class="search_body_b">
          <div>
            <div>
              <span>实习区域：</span>
            </div>
            <div>
              <span class="search_body_b_a">不限</span>
            </div>
          </div>
          <div>
            <div>
              <span>实习月份：</span>
            </div>
            <div>
              <span
                v-for="(xxyf, ia) in xxyf"
                :key="ia"
                @click="xxyfcount = ia"
                :class="{ search_body_b_b: xxyfcount == ia }"
              >
                {{ xxyf }}
              </span>
            </div>
          </div>
          <div>
            <div>
              <span>每周几天：</span>
            </div>
            <div>
              <span
                v-for="(mzjt, ib) in mzjt"
                :key="ib"
                @click="mzjtcount = ib"
                :class="{ search_body_b_c: mzjtcount == ib }"
              >
                {{ mzjt }}
              </span>
            </div>
          </div>
          <div>
            <div>
              <span>学历要求：</span>
            </div>
            <div>
              <span
                v-for="(xlyq, ic) in xlyq"
                :key="ic"
                @click="xlyqcount = ic"
                :class="{ search_body_b_d: xlyqcount == ic }"
              >
                {{ xlyq }}
              </span>
            </div>
          </div>
          <div>
            <div>
              <span>转正机会：</span>
            </div>
            <div>
              <span
                v-for="(zzjh, id) in zzjh"
                :key="id"
                @click="zzjhcount = id"
                :class="{ search_body_b_d: zzjhcount == id }"
              >
                {{ zzjh }}
              </span>
            </div>
          </div>
          <div class="search_body_b_list">
            <div>
              <span>企业筛选：</span>
            </div>
            <div>
              <span
                v-for="(qysx, ie) in qysx"
                :key="ie"
                @click="qysxcount = ie"
                :class="{ search_body_b_d: qysxcount == ie }"
              >
                {{ qysx }}
              </span>
            </div>
          </div>
        </div>
        <div class="search_body_c" @click="changeshow">
          <span></span>
        </div>
      </div>

      <div class="search_foot">
        <div class="search_foot_a">排序方式：</div>
        <div class="search_foot_b">
          <div
            v-for="(twoa, ips) in twoa"
            :key="ips"
            @click="twoacount = ips"
            :class="{ search_foot_b_a: twoacount == ips }"
          >
            {{ twoa }}
          </div>
        </div>
        <div class="search_foot_d">日薪:</div>
        <div class="search_foot_e">
          <div class="search_foot_e_a" @click="changeshow1">
            {{ this.fbrx[fbrxcount] }}
            <span></span>
          </div>
          <div v-if="bian1" class="search_foot_e_b">
            <div class="search_foot_e_b_a"></div>
            <div class="search_foot_e_b_b">
              <div
                v-for="(fbrx, ij) in fbrx"
                :key="ij"
                @click="fbrxcount = ij"
                :class="{ search_foot_e_b_b_a: fbrxcount == ij }"
              >
                {{ fbrx }}
              </div>
            </div>
          </div>
        </div>
        <div class="search_foot_f">发布时间：</div>
        <div class="search_foot_g">
          <div class="search_foot_g_a" @click="changeshow2">
            {{ this.fbsj[fbsjcount] }}
            <span></span>
          </div>
          <div v-show="bian2" class="search_foot_g_b">
            <div class="search_foot_g_b_a"></div>
            <div class="search_foot_g_b_b">
              <div
                v-for="(fbsj, iw) in fbsj"
                :key="iw"
                @click="fbsjcount = iw"
                :class="{ search_foot_g_b_b_a: fbsjcount == iw }"
              >
                {{ fbsj }}
              </div>
            </div>
          </div>
        </div>
        <div @click="clear1" class="search_foot_m">清空</div>
      </div>
    </div>

    <div class="search_last">
      <div class="search_last_a">
        <div class="search_last_mm"></div>
        <div class="search_last_a_a">
          <!-- <div class="search_last_a_a_a">
            <div class="search_last_a_a_a_a">
              <div>
                <h3>人事实习生 <span>120/天</span></h3>
                <p>武汉 | 3天/周 | 6个月</p>
              </div>
              <div>
                <h3>法雷奥照明技术中心</h3>
                <p>武汽车/机械/制造/150-500人</p>
              </div>
            </div>
            <div class="search_last_a_a_a_b">
              <div>
                <span>工作午餐</span>
                <span>免费班车</span>
                <span>培训赋能</span>
              </div>
              <div>外企，国际化团队</div>
            </div>
            <img src="../assets/img/log1.jpg" alt="" />
          </div>
          <div class="search_last_a_a_a">
            <div class="search_last_a_a_a_a">
              <div>
                <h3>人事实习生 <span>120/天</span></h3>
                <p>武汉 | 3天/周 | 6个月</p>
              </div>
              <div>
                <h3>法雷奥照明技术中心</h3>
                <p>武汽车/机械/制造/150-500人</p>
              </div>
            </div>
            <div class="search_last_a_a_a_b">
              <div>
                <span>工作午餐</span>
                <span>免费班车</span>
                <span>培训赋能</span>
              </div>
              <div>外企，国际化团队</div>
            </div>
            <img src="../assets/img/log1.jpg" alt="" />
          </div> -->
          <template v-if="data">
            <div class="search_last_a_a_a" v-for="data in data" :key="data.jid">
              <div class="search_last_a_a_a_a" @click="tiaozhuan(data.jid)">
                <div>
                  <h3>
                    {{ data.jname }} <span>{{ data.jsalary }}</span>
                  </h3>
                  <p>
                    {{ data.jaddress }} |{{ data.jrequest1 }} |
                    {{ data.jrequest2 }}
                  </p>
                </div>
                <div>
                  <h3>
                    {{ data.jtitle }}
                  </h3>
                  <p>{{ data.jsubtitle }}/150-500人</p>
                </div>
              </div>
              <div class="search_last_a_a_a_b">
                <div>
                  <span>工作午餐</span>
                  <span>免费班车</span>
                  <span>培训赋能</span>
                </div>
                <div>{{ data.jcondition1 }}</div>
              </div>
              <img :src="imgBase + data.jimg" alt="" />
            </div>
          </template>
        </div>
        <div class="search_last_a_b">
          <img src="../assets/img/log2.png" alt="" />
        </div>
        <div class="pager">
          <div class="pager_a" v-if="fenye">
            <div
              class="pager_a_a"
              @click="getDate(fenye.pageNo - 1)"
              :class="{ disabled: fenye.pageNo == 1 }"
            >
              <span></span>
            </div>
            <div
              v-for="p in fenye.total"
              :class="{ active: p == fenye.pageNo }"
              @click="
                fenye.pageNo = p;
                getDate(p);
              "
              :key="p"
            >
              {{ p }}
            </div>
            <!-- <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>...</div> -->
            <div
              class="pager_a_b"
              @click="getDate(fenye.pageNo + 1)"
              :class="{ disabled: fenye.pageNo == fenye.total }"
            >
              <span></span>
            </div>
          </div>
        </div>
      </div>
      <div class="search_last_b"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      fenye: null,
      bian: false,
      bian1: false,
      bian2: false,
      data: null,
      kw2: "",
      xxyf: ["不限", "一月", "二月", "三月以上"],
      xxyfcount: 0,
      mzjt: ["不限", "一天", "两天", "三天", "四天", "五天", "六天以上"],
      mzjtcount: 0,
      xlyq: ["不限", "大专", "本科", "硕士", "博士"],
      xlyqcount: 0,
      zzjh: ["不限", "提供转正", "不提供转正", "面议"],
      zzjhcount: 0,
      qysx: ["不限", "知名企业", "互联网300强"],
      qysxcount: 0,
      twoa: ["默认", "最新"],
      twoacount: 0,
      fbrx: ["不限", "100以下", "100-150", "150-200", "200-300", "300以上"],
      fbrxcount: 0,
      fbsj: ["不限", "一天内", "一周内", "一月内"],
      fbsjcount: 0,
    };
  },
  computed: {
    ...mapState(["imgBase"]),
  },
  props: ["kw"],

  watch: {
    kw() {
      this.getDate();
    },
  },
  mounted() {
    this.getDate();
    document.addEventListener("click", (e) => {
      if (e.target.className != "search_foot_e_a") {
        this.bian1 = false;
      }
    });
    document.addEventListener("click", (e) => {
      if (e.target.className != "search_foot_g_a") {
        this.bian2 = false;
      }
    });
  },
  methods: {
    // 点击跳转到详情页
    tiaozhuan(jid) {
      this.$router.push("/details/" + jid);
    },
    changeshow() {
      this.bian = !this.bian;
    },

    changeshow1(e) {
      // console.log(e);
      if (this.bian1 == true) {
        this.bian1 = false;
      } else if (this.bian1 == false) {
        this.bian1 = true;
        this.bian2 = false;
      }
      // this.bian1 = !this.bian1
    },
    changeshow2(e) {
      // console.log(e);
      if (this.bian2 == true) {
        this.bian2 = false;
      } else if (this.bian2 == false) {
        this.bian2 = true;
        this.bian1 = false;
      }
      // this.bian2 = !this.bian2
    },
    clear() {
      this.xxyfcount = 0;
      this.mzjtcount = 0;
      this.xlyqcount = 0;
      this.zzjhcount = 0;
      this.qysxcount = 0;
    },
    clear1() {
      this.twoacount = 0;
      this.fbrxcount = 0;
      this.fbsjcount = 0;
    },
    getDate(p) {
      if (this.kw) {
        const url = `/v1/news/search?jtitle=` + this.kw;
        this.axios.get(url).then((res) => {
          // console.log("kw", res);
          this.data = res.data.data;
          this.fenye = null;
        });
      } else {
        const url = `/v1/news/products?page=${p}`;
        // console.log(url);
        this.axios.get(url).then((res) => {
          // console.log("分页", res);
          this.data = res.data.data;
          // 分页
          if (res.data.total >= 2) {
            this.fenye = res.data;
          }
        });
      }
    },

    getDate2(p) {
      if (this.kw2) {
        const url = `/v1/news/search?jtitle=` + this.kw2;
        this.axios.get(url).then((res) => {
          // console.log("kw2", res);
          this.data = res.data.data;
          this.fenye = null;
        });
      } else {
        const url = `/v1/news/products?page=${p}`;
        // console.log(url);
        this.axios.get(url).then((res) => {
          // console.log("分页", res);
          this.data = res.data.data;
          // 分页
          // console.log(res.data.total);
          if (res.data.total >= 2) {
            this.fenye = res.data;
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.pager_a_b.disabled {
  pointer-events: none;
}
</style>
<style scoped src="../assets/css/search.css">
</style>